<template>
  <div class="wrap-2 flex flex-col">
      <div class="count-item flex items-center">
          <van-field v-model="totalPrice" label="房屋总价" input-align="right" placeholder="" />
          <span style="width:10vw;" class="mr-2">万元</span>
      </div>
      <!-- 首付比例 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="首付比例"
                input-align="right"
                :value="payPercent"
                @click="showPicker1 = true"
                />
                <van-popup v-model="showPicker1" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="scaleList"
                    :default-index="2"
                    @cancel="showPicker1 = false"
                    @confirm="onConfirm1"
                />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <!-- 贷款总额 -->
        <div class="count-item flex items-center">
          <van-field v-model="loanMoney" label="贷款总额" input-align="right" placeholder="" />
          <span style="width:10vw;" class="mr-2">万元</span>
        </div>
         <!-- 贷款年限 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="贷款年限"
                input-align="right"
                :value="loanYear"
                @click="showPicker3 = true"
                />
                <van-popup v-model="showPicker3" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="loanYearsList"
                    :default-index="29"
                    @cancel="showPicker3 = false"
                    @confirm="onConfirm3"
                />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
          <!-- 公积金利率 -->
        <div class="count-item flex items-center">
             <van-field
                readonly
                clickable
                label="利率"
                input-align="right"
                :value="finalRate + '%'"
                @click="showPicker2 = true"
                />
                <!-- <van-popup v-model="showPicker2" round position="bottom"> -->
                <!-- <van-picker
                    show-toolbar
                    :columns="rateList"
                    :default-index="0"
                    @cancel="showPicker2 = false"
                    @confirm="onConfirm2"
                />
                </van-popup> -->
                <popup-rate @choosed='choosed' v-show="showPicker2" :rateList="rateList" />
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <div class="count-item btn" @click="caculateLoan">开始计算</div>
        <!-- <div class="bottom"  @click="tips"><span>我要帮助</span><span class="line">|</span><span>意见反馈</span></div> -->
        <div class="bottom-tips">create by wangerge</div>
            <van-popup v-model="showResult" :style="{height: '100%'}" :overlay="false" closeable >
                <count-result
                    v-if="showResult"
                    type="gjj"
                    :totalPrice="+totalPrice"
                    :gloanMoney="+loanMoney"
                    :gyears="years"
                    :gfinalRate="finalRate"
                    :sloanMoney="0"
                    :syears="0"
                    :sfinalRate="0"
                    id="result"/>
            </van-popup>
  </div>
</template>
<script>
import countResult from './countResult'
import popupRate from './popupRate.vue';
import { Toast } from 'vant';

export default {
     components:{
        countResult,
        popupRate
    },
    data(){
        return{
            value: '',
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            columns: ['按贷款总额','按贷款总额','按贷款总额','按贷款总额','按贷款总额'],
            loanYearsList: [],
            loanYear: "30年(360期)",
            defaultRate: '基准利率',
            finalRate: 3.25,
            payRateLabel: "三成",
            totalPrice: 100,
            payRate: 0.3,
            rateList: [
                {
                    name: "最新报价利率(LPR)",
                    desc: '',
                    key: 3.25
                },
                 {
                    name: "基准利率",
                    desc: '',
                    key: 3.25              
                },
                 {
                    name: "7折",
                    desc: '基准利率下限',
                    key: 2.28
                },
                 {
                    name: "85折",
                    desc: '基准利率下限',
                    key: 2.76
                },
                 {
                    name: "1.05倍",
                    desc: '基准利率上限',
                    key: 3.41
                },
                 {
                    name: "1.1倍",
                    desc: '基准利率上限',
                    key: 3.57
                }
            ],
            scaleList: ["一成","二成","三成","四成","五成","六成","七成","八成","九成"],
            basicPoint: [],
            showResult: false,
            years: 30,
            payPercent: ''
        }
    },
    watch: {
        payRateLabel: {
            handler(){
                if (!this.payRateLabel) {
                    this.payMoney = this.payRate;
                    return this.payRate + "万";
                } else {
                    this.payMoney = (this.totalPrice * this.payRate).toFixed(2);
                    // 首付比例
                    this.payPercent =  (
                    this.payRateLabel +
                    "(" +
                    (this.totalPrice * this.payRate).toFixed(2) +
                    "万" +
                    ")"
                    )
                }
            }
        }
        
    },
     created(){
        // this.getgRate();
    },
    computed:{
        // 贷款总额
         loanMoney() {      
            return (this.totalPrice * (1 - this.payRate)).toFixed(2);
            },
            //  首付比例
        //  payPercent() {
        //     if (!this.payRateLabel) {
        //         this.payMoney = this.payRate;
        //         return this.payRate + "万";
        //     } else {
        //         this.payMoney = (this.totalPrice * this.payRate).toFixed(2);
        //         return (
        //         this.payRateLabel +
        //         "(" +
        //         (this.totalPrice * this.payRate).toFixed(2) +
        //         "万" +
        //         ")"
        //         )
        //     }
        // }
    },
    mounted() {
        for (let i = 1; i < 31; i++) {
        this.loanYearsList.push(i + "年" + "(" + i * 12 + "期)");
        }
    },
    methods: {
        // async getgRate(){
        //     let { data } = await this.$axios.post(APIS.RATE, {
        //             type: 1
        //         })
        //         if(data.code == 0){
        //             console.log(data)
        //             this.rateList = JSON.parse(JSON.stringify(data.data))   
        //         }
               
        // },
         tips(){
            Toast('没有');
        },
    onConfirm1(value,index) {
         console.log(value)
            this.payRateLabel = value;
            this.payRate = (index +1) /10;  //首付百分比
            this.showPicker1 = false;
    },
    onConfirm2(value) {
         console.log(value)
            // this.value = value;
            this.showPicker2 = false;
    },
    onConfirm3(value,index) {
         console.log(value)
            this.loanYear = value;
            this.years = index + 1;
            this.showPicker3 = false;
    },
     caculateLoan() {
         this.showResult = true;
         console.log(this.totalPrice,
                    this.loanMoney,
                    this.years,
                    this.finalRate)
     },
     choosed(data){
         console.log(data)
         this.finalRate = data;
         this.showPicker2 = false;
     }
  }
};
</script>
<style lang="scss" scoped>
.wrap-2{
    align-items: center;
    font-family: PingFangSC-Regular;
    .count-item{
        width: 87.5vw;
        height: 5.5vh;
        background: #FFFFFF;
        border-radius: 8px;
        margin-top: 2.5vh;
    }
    .btn{
        text-align: center;
        line-height: 5.5vh;
        color: #fff;
        background-color: #4687f2;
    }
.bottom{
    font-size: 15px;
    color: #A6A6A6;
    letter-spacing: 0;
    text-align: center;
    margin-top: 30px;
    }
    .bottom .line{
        margin: 0 15px;
    }
}
.bottom-tips{
    font-size: 16px;
    color: #4687f2;
    text-decoration: underline;
    margin-top: 2.5vh;
    width: 87.5vw;
    text-align: center;
}
/deep/ .van-cell{
    background-color:transparent;
}
/deep/ .van-field__label{
    width: 8.2rem;
}
</style>